<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <meta name="viewport" content="height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta name="description" content="A Collection of Page Transitions with CSS Animations" />
    <meta name="keywords" content="page transition, css animation, website, effect, css3, jquery" />
    <meta name="author" content="Codrops" />
    <title>Image</title>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/default.css" />
    <link rel="stylesheet" type="text/css" href="../css/multilevelmenu.css" />
    <link rel="stylesheet" type="text/css" href="../css/component.css" />
    <link rel="stylesheet" type="text/css" href="../css/animations.css" />
    <script src="../js/modernizr.custom.js"></script>
    <link rel="stylesheet" href="http://dreamsky.github.io/main/blog/common/init.css">
    <!--<script src="http://dreamsky.github.io/main/blog/common/jquery.min.js"></script>-->
    <!--<script src="http://dreamsky.github.io/main/blog/common/init.js"></script>-->
    <script>
        $().ready(function(){
//            init();
            const img = $("#img1");
            const div = $('#div1');
            const img2 = $('#img2');
            $divH = div.height();
            $divW = div.width();


            var imgAni = function() {
                img2.animate({
                    left:$divW - img2.width()
                }, 2000)
            };

            $w = img.width();
            $h = img.height();
            $x = ($divW - $w) * 0.4;
            img.css('left', $x);
            $bw = $divW * 3;
            $bh = $divH * 3;
            img.animate({
                height: '200%',
                left: ($divW - $bw) * 0.4,
                top: ($divH - $bw) * 0.5
            }, 2000);


            img.animate({
                height: '100%',
                top: '0',
                left: $x
            }, 2000, function () {
                var button = $('#iterateEffects');
                button.click();
//                setTimeout('alert(3)', 2000);
                setTimeout(function(){fun();},1000);

            });

//            function ab()
//            {
//                var a=1;
//                var b =1;
//                setTimeout(function(){fun();},3000);
//
//            }
            function fun()
            {
                img2.animate({
                    left:$divW - img2.width()
                }, 2000);
                img2.animate({
                    left: 0
                }, 2000)
            }
//            img2.animate({
//                left:$divW - img2.width()
//            }, 2000)


        })
    </script>

    <style>
        .pt-page-1 {
            height: 100%;
            width: 100%;
            overflow: hidden;
            position: absolute;
            background-color: red;
        }
        #img1 {
            position: absolute;
            height: 100%;
        }
        #img2 {
            position: absolute;
            height: 100%;
        }

    </style>


</head>
<body>

<div class="pt-triggers">
    <button id="iterateEffects" class="pt-touch-button">显示下一页切换</button>
    <div id="dl-menu" class="dl-menuwrapper">
        <button class="dl-trigger">选择切换效果</button>
        <ul class="dl-menu">
            <li>
                <a href="#">Move</a>
                <ul class="dl-submenu">
                    <li data-animation="1"><a href="#">Move to left/ from right</a></li>
                    <li data-animation="2"><a href="#">Move to right/ from left</a></li>
                    <li data-animation="3"><a href="#">Move to top/ from bottom</a></li>
                    <li data-animation="4"><a href="#">Move to bottom/ from top</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Fade</a>
                <ul class="dl-submenu">
                    <li data-animation="5"><a href="#">Fade / from right</a></li>
                    <li data-animation="6"><a href="#">Fade / from left</a></li>
                    <li data-animation="7"><a href="#">Fade / from bottom</a></li>
                    <li data-animation="8"><a href="#">Fade / from top</a></li>
                    <li data-animation="9"><a href="#">Fade left / Fade right</a></li>
                    <li data-animation="10"><a href="#">Fade right / Fade left</a></li>
                    <li data-animation="11"><a href="#">Fade top / Fade bottom</a></li>
                    <li data-animation="12"><a href="#">Fade bottom / Fade top</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Different easing</a>
                <ul class="dl-submenu">
                    <li data-animation="13"><a href="#">Different easing / from right</a></li>
                    <li data-animation="14"><a href="#">Different easing / from left</a></li>
                    <li data-animation="15"><a href="#">Different easing / from bottom</a></li>
                    <li data-animation="16"><a href="#">Different easing / from top</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Scale</a>
                <ul class="dl-submenu">
                    <li data-animation="17"><a href="#">Scale down / from right</a></li>
                    <li data-animation="18"><a href="#">Scale down / from left</a></li>
                    <li data-animation="19"><a href="#">Scale down / from bottom</a></li>
                    <li data-animation="20"><a href="#">Scale down / from top</a></li>
                    <li data-animation="21"><a href="#">Scale down / scale down</a></li>
                    <li data-animation="22"><a href="#">Scale up / scale up</a></li>
                    <li data-animation="23"><a href="#">Move to left / scale up</a></li>
                    <li data-animation="24"><a href="#">Move to right / scale up</a></li>
                    <li data-animation="25"><a href="#">Move to top / scale up</a></li>
                    <li data-animation="26"><a href="#">Move to bottom / scale up</a></li>
                    <li data-animation="27"><a href="#">Scale down / scale up</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Rotate</a>
                <ul class="dl-submenu">
                    <li>
                        <a href="#">Glue</a>
                        <ul class="dl-submenu">
                            <li data-animation="28"><a href="#">Glue left / from right</a></li>
                            <li data-animation="29"><a href="#">Glue right / from left</a></li>
                            <li data-animation="30"><a href="#">Glue bottom / from top</a></li>
                            <li data-animation="31"><a href="#">Glue top / from bottom</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Flip</a>
                        <ul class="dl-submenu">
                            <li data-animation="32"><a href="#">Flip right</a></li>
                            <li data-animation="33"><a href="#">Flip left</a></li>
                            <li data-animation="34"><a href="#">Flip top</a></li>
                            <li data-animation="35"><a href="#">Flip bottom</a></li>
                        </ul>
                    </li>
                    <li data-animation="36"><a href="#">Fall</a></li>
                    <li data-animation="37"><a href="#">Newspaper</a></li>
                    <li>
                        <a href="#">Push / Pull</a>
                        <ul class="dl-submenu">
                            <li data-animation="38"><a href="#">Push left / from right</a></li>
                            <li data-animation="39"><a href="#">Push right / from left</a></li>
                            <li data-animation="40"><a href="#">Push top / from bottom</a></li>
                            <li data-animation="41"><a href="#">Push bottom / from top</a></li>

                            <li data-animation="42"><a href="#">Push left / pull right</a></li>
                            <li data-animation="43"><a href="#">Push right / pull left</a></li>
                            <li data-animation="44"><a href="#">Push top / pull bottom</a></li>
                            <li data-animation="45"><a href="#">Push bottom / pull top</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Fold / Unfold</a>
                        <ul class="dl-submenu">
                            <li data-animation="46"><a href="#">Fold left / from right</a></li>
                            <li data-animation="47"><a href="#">Fold right / from left</a></li>
                            <li data-animation="48"><a href="#">Fold top / from bottom</a></li>
                            <li data-animation="49"><a href="#">Fold bottom / from top</a></li>
                            <li data-animation="50"><a href="#">Move to right / unfold left</a></li>
                            <li data-animation="51"><a href="#">Move to left / unfold right</a></li>
                            <li data-animation="52"><a href="#">Move to bottom / unfold top</a></li>
                            <li data-animation="53"><a href="#">Move to top / unfold bottom</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Room</a>
                        <ul class="dl-submenu">
                            <li data-animation="54"><a href="#">Room to left</a></li>
                            <li data-animation="55"><a href="#">Room to right</a></li>
                            <li data-animation="56"><a href="#">Room to top</a></li>
                            <li data-animation="57"><a href="#">Room to bottom</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Cube</a>
                        <ul class="dl-submenu">
                            <li data-animation="58"><a href="#">Cube to left</a></li>
                            <li data-animation="59"><a href="#">Cube to right</a></li>
                            <li data-animation="60"><a href="#">Cube to top</a></li>
                            <li data-animation="61"><a href="#">Cube to bottom</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Carousel</a>
                        <ul class="dl-submenu">
                            <li data-animation="62"><a href="#">Carousel to left</a></li>
                            <li data-animation="63"><a href="#">Carousel to right</a></li>
                            <li data-animation="64"><a href="#">Carousel to top</a></li>
                            <li data-animation="65"><a href="#">Carousel to bottom</a></li>
                        </ul>
                    </li>
                    <li data-animation="66"><a href="#">Sides</a></li>
                </ul>
            </li>
            <li data-animation="67"><a href="#">Slide</a></li>
        </ul>
        <div class="footer-banner" style="position:absolute;bottom:-350px;left:-200px;width:728px; margin:30px auto"></div>
    </div><!-- /dl-menu-wrapper-->
</div><!-- /triggers -->

<div id="pt-main" class="pt-prespective">
    <div class="pt-page pt-page-1" id="div1">
        <img id="img1" src="../files/1.png">
    </div> 
    <div class="pt-page pt-page-2" style="overflow: auto">
        <img id="img2" src="../files/2.png">
    </div>
</div>

<!--<button id="iterateEffects" class="pt-touch-button" style="display: none">显示下一页切换</button>-->

<script src="../js/jquery.dlmenu.js"></script>
<script src="../js/pagetransitions.js"></script>
<!--<script>-->
    <!--$().ready(function(){-->
        <!--const img = $("#img1");-->
        <!--const div = $('.pt-page-1');-->
        <!--$divH = div.height();-->
        <!--$divW = div.width();-->

        <!--$w = img.width();-->
        <!--$h = img.height();-->
        <!--$x = ($divW - $w) * 0.4;-->
        <!--img.css('left', $x);-->
        <!--$bw = $divW * 3;-->
        <!--$bh = $divH * 3;-->
        <!--img.animate({-->
            <!--height: '200%',-->
            <!--left: ($divW - $bw) * 0.4,-->
            <!--top: ($divH - $bw) * 0.5-->
        <!--}, 2000);-->


        <!--img.animate({-->
            <!--height: '100%',-->
            <!--top: '0',-->
            <!--left: $x-->
        <!--}, 2000, function () {-->
            <!--var button = $('#iterateEffects');-->
            <!--button.click();-->
        <!--})-->

    <!--})-->
<!--</script>-->
</body>
</html>